<template>
  <div class="file-list-box">
    <div class="list-name">附件</div>
    <div class="file-list-box-all">
      <div
        v-for="(item, index) in fileListArr"
        :key="index"
        class="file-box">
        <!-- 图片 -->
        <!-- <el-tooltip  v-viewer effect="dark" content="点击预览" placement="top-start"> -->
        <!-- <el-button>上左</el-button> -->
        <div
          class="file-img-box"
          v-if="item.type === 'jpg' || item.type === 'png'">
          <div v-viewer>
            <el-image
              class="file-img"
              fit="cover"
              :src="item.fileUrl" />
          </div>
          <el-button
            type="text"
            @click="toDownload(item.fileUrl)">下载</el-button>
        </div>

        <!-- word -->
        <div
          class="file-document"
          v-if="fileType.includes(item.type)">
          <i class="el-icon-document" />
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.fileName"
            placement="top">
            <p>{{ item.fileName }}</p>
          </el-tooltip>
          <el-button
            type="text"
            @click="toDownload(item.fileUrl)">下载</el-button>
        </div>
        <!-- pdf -->
        <div
          class="file-pdf"
          v-if="item.type === 'pdf'">
          <i class="el-icon-tickets" />
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.fileName"
            placement="top">
            <p>{{ item.fileName }}</p>
          </el-tooltip>
          <div>
            <el-button
              type="text"
              @click="toPreview(item.fileUrl)">预览</el-button>
            <el-button
              type="text"
              @click="toDownload(item.fileUrl)">下载</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    fileListArr: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      fileType: 'doc,docx,xls,xlsx'
    }
  },
  methods: {
    // 下载文件
    toDownload (url) {
      window.open(url)
    },
    toPreview (url) {
      this.$pdfViewer({ url: url, title: 'PDF预览' })
    }
  }
}
</script>
<style lang="less">
.file-list-box {
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  .list-name {
    padding: 0 15px;
    color: #a7b1c7;
  }
  .file-list-box-all {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    .file-box {
      padding: 10px;
      border: 1px dotted;
      margin: 10px;
      position: relative;
      height: 130px;
      .file-img-box {
        width: 80px;
        // height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .file-img {
          width: 80px;
          height: 75px;
        }
      }
      .file-document {
        width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        i {
          font-size: 60px;
        }
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 80px;
          text-align: center;
        }
      }
      .file-pdf {
        width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        i {
          font-size: 60px;
        }
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 80px;
          text-align: center;
        }
      }
    }
  }
}
</style>
